<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
	<title>Script init() test</title>

  <script type="text/javascript" src="../../../processing.js"></script> 

	<script type="text/processing" src="c1.pde" data-processing-target="c1"></script>
	<script type="text/processing" data-processing-target="c2">
    String lstring = "C2 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop(); }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2); }
  </script>
	<script type="application/processing" src="c3.pde" data-processing-target="c3"></script>
	<script type="application/processing" data-processing-target="c4">
    String lstring = "C4 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop(); }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2); }
  </script>

	<style>
	  canvas { border: 1px solid black; }
	  p { margin: 0px; padding: 0px; }
	</style>
</head>

<!--
  Various sketches are placed at the start of the <body> block, 
  to see if they are linked to the correct <canvas> elements
-->
<body>
	<script type="text/processing" data-processing-target="c5">
    String lstring = "C5 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop(); }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2); }
  </script>
	<script type="application/processing" data-processing-target="c6">
    String lstring = "C6 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop(); }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2); }
  </script>
	<script type="text/processing" data-processing-target="c7" src="c7.pde"></script>
	<script type="application/processing" data-processing-target="c8" src="c8.pde"></script>


  <h1>Sketch loading test; both inline and from source</h1>


  <h2>canvas 1 - script-src from head for text/processing</h2>
  <pre>&lt;head&gt;
  ...
  &lt;script type="text/processing" src="c1.pde" data-processing-target="c1"&gt;&lt;/script&gt;
  ...
&lt;/head&gt;</pre>
	<canvas id="c1"></canvas>

  <h2>canvas 2 - script block from head for text/processing</h2>
  <pre>&lt;head&gt;
  ...
  &lt;script type="text/processing" data-processing-target="c2"&gt; /*code*/ &lt;/script&gt;
  ...
&lt;/head&gt;</pre>
	<canvas id="c2"></canvas>

  <h2>canvas 3 - script-src from head for application/processing</h2>
  <pre>&lt;head&gt;
  ...
  &lt;script type="application/processing" src="c3.pde" data-processing-target="c3"&gt;&lt;/script&gt;
  ...
&lt;/head&gt;</pre>
	<canvas id="c3"></canvas>


  <h2>canvas 4 - script block from head for application/processing</h2>
  <pre>&lt;head&gt;
  ...
  &lt;script type="application/processing" data-processing-target="c4"&gt; /*code*/ &lt;/script&gt;
  ...
&lt;/head&gt;</pre>
	<canvas id="c4"></canvas>


  <h2>canvas (anonymous 1) - inline sketch without a target for text/processing</h2>
  <pre>  &lt;script type="text/processing"&gt;
    String lstring = "A1 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop();
    }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2);
    }
  &lt;/script&gt;
  &lt;canvas&gt;&lt;/canvas&gt;</pre>
	<script type="text/processing">
    String lstring = "A1 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop();
    }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2);
    }
  </script>
	<canvas></canvas>
  <p style="color:#660000;">NOTE: because there is no explicit element ordering, this is (strictly speaking) magic behaviour</p>


  <h2>canvas (anonymous 2) - inline sketch without a target for application/processing</h2>
  <pre>  &lt;script type="application/processing"&gt;
    String lstring = "A2 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop();
    }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2);
    }
  &lt;/script&gt;
  &lt;canvas&gt;&lt;/canvas&gt;</pre>
	<script type="application/processing">
    String lstring = "A2 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop(); }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2); }
  </script>
	<canvas></canvas>
  <p style="color:#660000;">NOTE: because there is no explicit element ordering, this is (strictly speaking) magic behaviour</p>


  <h2>canvas 5 - inline sketch with target for text/processing</h2>
  <pre>&lt;body&gt;
  &lt;script type="text/processing" data-processing-target="c5"&gt;
    String lstring = "C5 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop();
    }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2);
    }
  &lt;/script&gt;
  ...
  &lt;canvas id="c5"&gt;&lt;/canvas&gt;
  ...
&lt;/body&gt;</pre>
	<canvas id="c5"></canvas>


  <h2>canvas 6 - inline sketch with target for application/processing</h2>
  <pre>&lt;body&gt;
  &lt;script type="application/processing" data-processing-target="c6"&gt;
    String lstring = "C6 loaded successfully!";
    void setup() {
      size(200,100);
      textFont(createFont("Arial",18));
      noLoop();
    }
    void draw() {
      fill(0);
      float tw = textWidth(lstring);
      text(lstring, (width-tw)/2, height/2);
    }
  &lt;/script&gt;
  ...
  &lt;canvas id="c6"&gt;&lt;/canvas&gt;
  ...
&lt;/body&gt;</pre>
	<canvas id="c6"></canvas>

  <h2>canvas 7 - script-src from body for text/processing, using target</h2>
  <pre>&lt;body&gt;
  &lt;script type="text/processing" src="c7.pde" data-processing-target="c7"&gt;&lt;/script&gt;
  ...
  &lt;canvas id="c7"&gt;&lt;/canvas&gt;
  ...
&lt;/body&gt;</pre>
	<canvas id="c7"></canvas>

  <h2>canvas 8 - script-src from body for application/processing, using target</h2>
  <pre>&lt;body&gt;
  &lt;script type="application/processing" src="c8.pde" data-processing-target="c8"&gt;&lt;/script&gt;
  ...
  &lt;canvas id="c8"&gt;&lt;/canvas&gt;
  ...
&lt;/body&gt;</pre>
	<canvas id="c8"></canvas>

  <h2>canvas 9 - script-src from body for text/processing, no target</h2>
  <pre>  &lt;script type="text/processing" src="c9.pde"&gt;&lt;/script&gt;
  &lt;canvas id="c9"&gt;&lt;/canvas&gt;</pre>
  <script type="text/processing" src="c9.pde"></script>
	<canvas id="c9"></canvas>
  <p style="color:#660000;">NOTE: because there is no explicit element ordering, this is (strictly speaking) magic behaviour</p>


  <h2>canvas 10 - script-src from body for application/processing, no target</h2>
  <pre>  &lt;script type="application/processing" src="c10.pde"&gt;&lt;/script&gt;
  &lt;canvas id="c10"&gt;&lt;/canvas&gt;</pre>
  <script type="application/processing" src="c10.pde"></script>
	<canvas id="c10"></canvas>
  <p style="color:#660000;">NOTE: because there is no explicit element ordering, this is (strictly speaking) magic behaviour</p>


  <h2>canvas (anonymous 3) - normal loading using a canvas, without id, that indicates its own source files</h2>
  <pre>  &lt;canvas data-processing-sources="a3.pde"&gt;&lt;/canvas&gt;</pre>
	<canvas data-processing-sources="a3.pde"></canvas>


  <h2>canvas 11 - normal loading using a canvas, with id, that indicates its own source files</h2>
  <pre>  &lt;canvas id="c11" data-processing-sources="c11.pde"&gt;&lt;/canvas&gt;</pre>
	<canvas id="c11" data-processing-sources="c11.pde"></canvas>
</body>
</html>